<template>
  <div class="box_index">
    <div class="mind">
      <h3>——&nbsp;生活百货&nbsp;——</h3>
    </div>
    <!-- 易购超市 -->
    <div class="album">
        <div class="album_top">
            <h3>易购超市</h3>
            <img src="../../../assets/img/Home/sk_arrow@1x.png" alt />
            <span>精选超值好物</span>
        </div> 
        <div class="mind_img_img">
            <img src="../../../assets/img/Home/5b4c45bfNcfd19212.jpg" alt />
        </div>
        <div class="mind_img">
            <img src="../../../assets/img/Home/5b4c43a8Ndb67446f.jpg" alt="">
            <img src="../../../assets/img/Home/5b4c43a8Ndb67446f.jpg" alt="">
        </div>
    </div>
    <!-- 玩具世界 -->
    <div class="album">
        <div class="album_top">
            <h3>玩具世界</h3>
            <img src="../../../assets/img/Home/sk_arrow@1x.png" alt />
            <span>甄选京东优质店铺</span>
        </div>
        <div class="life_page">
            <div class="life_page_left">
                <p>可口可乐京东自营旗舰店</p>
                <div class="life_page_left_text">
                    <div class="life_page_left_text1">
                        <span>易购</span>
                    </div>
                    <div class="life_page_left_text2">
                        <span>自营</span>
                    </div>
                </div>
                <i>45.7万人关注</i>
            </div>
            <div class="life_page_center">
                <img src="../../../assets/img/Home/fb895931201c2060.jpg" alt="">
                <p>￥69.90</p>
            </div>
            <div class="life_page_right">
                <img src="../../../assets/img/Home/fb895931201c2060.jpg" alt="">
                <p>￥69.90</p>
            </div>
        </div>
        <div class="life_page">
            <div class="life_page_left">
                <p>可口可乐京东自营旗舰店</p>
                <div class="life_page_left_text">
                    <div class="life_page_left_text1">
                        <span>易购</span>
                    </div>
                    <div class="life_page_left_text2">
                        <span>自营</span>
                    </div>
                </div>
                <i>45.7万人关注</i>
            </div>
            <div class="life_page_center">
                <img src="../../../assets/img/Home/fb895931201c2060.jpg" alt="">
                <p>￥69.90</p>
            </div>
            <div class="life_page_right">
                <img src="../../../assets/img/Home/fb895931201c2060.jpg" alt="">
                <p>￥69.90</p>
            </div>
        </div>
    </div>
    <!-- 阅读好时光 -->
    <div class="qi">
      <div class="qi_img">
        <img src="../../../assets/img/Home/621ba166c722cd7e.jpg" alt />
      </div>
    </div>
  </div>
</template>
<style>
/* 玩具世界 */
.life_page{
    width: 350px;
    height: 180px;
    margin: 0 20px;
    background-color: #E3E6EC;
    overflow: hidden;
    margin-bottom: 10px;
}
.life_page_left{
    width: 116px;
    height: 180px;
    background-color: rgba(121, 135, 164, 0.5);
    position: relative;
    float: left;
}
.life_page_left_text{
    margin: 10px 20px;
}
.life_page_left_text1,.life_page_left_text2{
    width: 25px;
    height: 17px;
    border:1px solid #e4393c;
    background-color: #fff;
    float: left;
}
.life_page_left_text2{
    background-color: #e4393c;
}
.life_page_left_text1 span,.life_page_left_text2 span{
    width: 25px;
    height: 17px;
    color: #e4393c;
    font-size: 12px;
}
.life_page_left_text2 span{
    color: #fff;
    font-weight: normal;
}
.life_page_left p{
    font-size: 14px;
    color: #fff;
    font-weight: bold;
    margin: 30px 10px 0;
}
.life_page_left i{
    font-size: 12px;
    color: #fff;
    position: absolute;
    bottom: 30px;
    left: 12px;
    font-style: initial;
}
.life_page_center,.life_page_right{
    width: 117px;
    height: 180px;
    float: left;
}  
.life_page_center img,.life_page_right img{
    border-radius: 10px;
    margin-top: 30px;
}
.life_page_center p,.life_page_right p{
    color: #e43235;
    font-size: 12px;
}
.mind_img{
    margin-top: 5px;
}
</style>